<template>
  <view class="pages">
    <nav-bar title='设置' titleSize='14' :backBtn='false'></nav-bar>
    <scroll-view class="user" scroll-y>
      <view class="padding-t20"></view>
      <cell-list>
        <cell-item title="账号与安全" titleColor="#000" height="43px" :borderBottom='false' rightIcon @click="$navigateTo('/pages/system/account')"></cell-item>
      </cell-list>
      <view class="padding-t20"></view>
      <cell-list>
        <!-- <cell-item title="多语言" titleColor="#000" height="43px" borderBottom rightIcon @click="$navigateTo()"></cell-item> -->
        <cell-item title="清除缓存" titleColor="#000" height="43px" borderBottom rightIcon @click="$navigateTo()"></cell-item>
        <cell-item title="关于卡罗琳" titleColor="#000" :rightValue='version' height="43px" :borderBottom='false' rightIcon @click="checkVersion()"></cell-item>
      </cell-list>
      <view class="padding-t20"></view>
      <!-- <view class="user-reserve jh-flex-center" @click="$navigateTo('/pages/system/change-account')">
        <image class='user-reserve-bg' :src="ossDomain + '/addressBook-item-bg.png'" mode="scaleToFill"></image>
        <view class="user-reserve-text font-B font-14">
          换账号登陆
        </view>
      </view> -->
      <view class="padding-t20"></view>
      <view class="user-reserve jh-flex-center" @tap='loginOut'>
        <image class='user-reserve-bg' :src="ossDomain + '/addressBook-item-bg.png'" mode="scaleToFill"></image>
        <view class="user-reserve-text font-B font-14">
          退出登陆
        </view>
      </view>
      <view class="padding-t20 padding-b20"></view>
    </scroll-view>
  </view>
</template>

<script>
  import cellItem from '@/components/cell/item.vue'
  import cellList from '@/components/cell/list.vue'
  import {checkVersion} from '@/utils/index.js'
  import {
    mapState
  } from 'vuex'
  export default {
    components: {
      cellItem,
      cellList
    },
    data() {
      return {
        ossDomain: uni.ossDomain,
        version: '1.0.12',
        sexList: [
          '未知',
          '男',
          '女'
        ]
      }
    },
    mounted() {
      // #ifdef APP-PLUS
      plus.runtime.getProperty(plus.runtime.appid,(wgtinfo)=>{
        this.version = wgtinfo.version
      })
      //#endif
    },
    methods: {
      checkVersion () {
        this.$http.appUpdated().then(res => {
          console.log(res.data);
          let info = res.data
          if (checkVersion(this.version,info.version)) {
            uni.showModal({
              title: '提示',
              content: '发现新版本: ' + info.version,
              success: (e) => {
                console.log(e);
                if (e.confirm) {
                  uni.setStorageSync('update',info)
                  this.$navigateTo('/pages/system/update/index')
                }
              }
            })
          } else {
            uni.showToast({
              icon: 'none',
              title: '已经是最新版本了'
            })
          }
        })
      },
      loginOut () {
        this.$store.dispatch('resetStore')
        uni.$app.logout()
        uni.hideLoading()
        uni.reLaunch({
          url: '/pages/login/main'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pages{
    width: 100%;
    height: 100vh;
    padding-right: 30px;
  }
  .user{
    padding-left: 30px;
    width: 100%;
    height: calc(100vh - 50px);
    box-sizing: border-box;
    &-reserve{
      width: 100%;
      height: 43px;
      border: 1px solid #ddd;
      position: relative;
      border-radius: 6px;
      overflow: hidden;
      &-bg{
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
      }
      &-text{
        position: relative;
        z-index: 2;
        color: #231815
      }
    }
  }
</style>
